<template>
  <div>
    <div class="setpkg-box">
      <div class="sort-content all-unit" :style="{height:inHeight+'px'}">
        <div style="margin: 20px 10px 0px 10px;">
          <!-- 新增包装单位 -->
          <div class="individual-opta" style="margin-bottom: 10px;">
            <div class="opta-form pkg-box">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="name">
                  <el-input v-model="form.name" placeholder="单位名称"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input v-model="form.code" placeholder="单位编码"></el-input>
                </el-form-item>
                <el-button size="mini" v-hasPermi="['inv:sort:add']" type="primary" @click="submitFrom('form')"
                  v-if="btnChange=='addStatus'">
                  确定</el-button>
                <el-button size="mini" v-hasPermi="['inv:sort:edit']" type="success" @click="submitFrom('form',treeNode)"
                  v-if="btnChange=='updateStatus'">保存</el-button>
              </el-form>
              <div>
                <el-form>
                  <el-form-item label="发料有无零头" class="ma-lable pkg-chip">
                    <el-switch v-model="form.beChip" active-value="1" inactive-value="0"></el-switch>
                  </el-form-item>
                </el-form>
              </div>

            </div>
          </div>
          <!-- 物料包装单位数据 -->
          <div class="height-tree individual-tree" :style="{height:(inHeight - 160)+'px'}">
            <el-tree :data="pkgTree" :highlight-current="isIndividualHeight" :props="defaultProps" ref="pkgTree"
              @node-click="nodeClick" v-loading="loading">
              <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%"
                @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
                <div class="chang-mourse unit-box">
                  <div class="inal-input">
                    <div class="al-dec"></div>
                    <div class="al-name" :ref="`pkgCode${node.data.uniqueId}`" :style="{width:codeWidth}">
                      {{node.label}}
                    </div>
                    <div style="width: 110px;">
                      {{data.code}}
                    </div>
                    <div>
                      {{data.beChip|isChip}}
                    </div>
                  </div>
                  <span class="mou-r">
                    <el-link v-hasPermi="['inv:sort:edit']" v-if="data.individualShow" size="mini"
                      style="color: #67c23a;" type="primary" icon="el-icon-edit" @click.stop="updateIndividual(node)">
                    </el-link>
                    <el-link v-hasPermi="['inv:sort:remove']" v-if="data.individualShow" size="mini"
                      style="color: #f56c6c;" type="primary" icon="el-icon-delete" @click.stop="remove(node)">
                    </el-link>
                  </span>
                </div>
              </span>
            </el-tree>
          </div>
        </div>
        <div style="height:40px;"></div>
        <div class="opta-add">
          <el-button type="primary" v-hasPermi="['inv:sort:add']" icon="el-icon-plus" plain @click="handleAdd">新增
          </el-button>
          <el-button icon="el-icon-close" plain @click="handleClose">关闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    addPkg,
    updatePkg,
    delPkg
  } from "../../api/sort"; //接口
  import {
    getCurrentNode,
    setCurrentNode
  } from "../../utils/sort.js" //js方法
  export default {
    data() {
      return {
        loading: false,
        //是否显示编码，修改子包装单位时不显示
        codeShow: true,
        //按钮状态
        btnChange: "addStatus",
        // 表单
        form: {
          code: "",
          name: "",
          status: "0"
        },
        //树形节点
        treeNode: "",
        // 是否高亮
        isIndividualHeight: false,
        //绑定树形数据名称
        defaultProps: {
          children: 'children',
          label: 'name',
        },
        // 表单校验
        rules: {
          code: [{
            required: true,
            trigger: 'blur'

          }],
          name: [{
            required: true,
            trigger: 'blur'

          }],

        }
      }
    },
    props: ["pkgStatus", "inHeight", "pkgTree", "codeWidth"],
    methods: {
      // 包装单位选中
      nodeClick() {
        this.isIndividualHeight = false;
        this.reset()
      },
      // 新增包装单位
      handleAdd() {
        this.btnChange = 'addStatus';
        this.codeShow = true;
        this.isIndividualHeight = false;
        this.reset();
      },

      // 修改包装单位
      updateIndividual(node) {
        this.$refs.form.resetFields()
        this.uplateAdd(node);
        this.treeNode = node; //节点赋值，用来确定位置
        this.btnChange = 'updateStatus';
        this.form.uniqueId = node.data.uniqueId;
        this.form.code = node.data.code;
        this.form.name = node.data.name;
        this.form.beChip = node.data.beChip;
        this.form.status = node.data.status;
        this.form.version = node.data.version;
      },


      // 移除包装单位
      remove(node) {
        this.$confirm('确认删除', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delPkg(node.data.uniqueId);
        }).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("删除成功");
            this.reset(); //重置表单
            this.isIndividualHeight = false;
            this.butChange = 'addStatus'; //按钮状态为添加
            this.$refs.pkgTree.remove(node) //移除节点
          }

        })
      },

      // 修改分类新增分类公共方法
      uplateAdd(node) {
        this.isIndividualHeight = true; // 上级分类高亮
        const getNode = [];
        getCurrentNode(node, getNode).then(currentNode => {
          setCurrentNode(this.$refs.pkgTree.root, currentNode)
        })

      },

      //鼠标进入事件
      mouseenter(data) {
        this.$set(data, "individualShow", true);
      },

      //鼠标离开事件
      mouseleave(data) {
        this.$set(data, "individualShow", false);
      },

      //提交表单
      submitFrom(form, node) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.btnChange == "addStatus") { //触发新增提交
              addPkg(this.form).then(res => {
                if (res.code == 200) {
                  this.msgSuccess("新增成功");
                  this.pkgTree.push(res.data)
                  this.reset(); //重置表单
                }
              }).catch(err => {
                this.msgError("新增失败");
              })
            } else if (this.btnChange == "updateStatus") {
              updatePkg(this.form).then(res => { //触发保存提交
                if (res.code == 200) {
                  this.msgSuccess("保存成功");
                  this.form.version = res.data.version
                  node.data.code = this.form.code;
                  node.data.name = this.form.name;
                  node.data.uniqueId = this.form.uniqueId;
                  node.data.status = this.form.status;
                 node.data.beChip = this.form.beChip;
                  node.data.version = res.data.version;
                }
              }).catch(err => {
                this.msgError("保存失败");
              })
            }
          }
        });
      },

      //重置
      reset() {
        this.form.uniqueId = "";
        this.form.code = "";
        this.form.name = "";
        this.form.beChip = "0";
        this.form.status = "0";
      },

      // 关闭当前
      handleClose() {
        this.$emit("update:pkgStatus", false)
      }
    },
    filters:{
      isChip(status){
          switch (status) {
            case '0':
              return "无零头"
              break;
            case '1':
              return "有零头"
              break;
            default:
              return "无零头"
          }
      }
    }

  }
</script>

<style lang="scss">
  .setpkg-box {
    .el-tree-node__content {
      height: inherit;
      border-bottom: 1px solid #dfe6ec;
      padding: 6px;
    }

    .el-tree-node__expand-icon {
      padding: 0;
    }

    .pkg-box {
      .pkg-chip {
        width: 170px;
        align-items: center;
        // .el-switch{
        //   height: 18px;
        //   line-height: 18px;
        //   width: 35px;
        // }
        // .el-switch__core{
        //    height: 18px;
        // }
        .el-form-item__label{
          padding-right: 5px;
        }
      }
      // .el-switch__core:after{
      //   height: 13px;
      //   width: 13px;
      // }
    }

    .all-unit {
      .el-tree-node__expand-icon.is-leaf {
        display: none;
      }

      .el-tree-node__content {
        padding-left: 6px !important;
      }
    }

    .unit-box {
      .inal-input {
        display: flex;
        align-items: center;

        .al-dec {
          width: 5px;
          height: 5px;
          display: inline-block;
          background: #ccc;
          vertical-align: middle;
          margin-right: 10px;
        }

        .al-name {
          margin-right: 100px;
        }

      }
    }

    .individual-opta {
      display: flex;
      align-items: center;

      .opta-form {
        .el-form {
          display: flex;
          align-items: center;

          .el-form-item {
            margin-right: 10px;
            margin-bottom: 0;
          }
        }

        .el-input {
          font-size: 13px;
        }

        .el-input__inner {
          height: 32px;
          line-height: 32px;
          font-size: 13px;
          border-radius: 4px;
        }

        .el-form-item__content {
          line-height: 32px;
        }
      }
    }

    .sort-content {
      position: relative;

      .opta-add {
        position: absolute;
        bottom: 30px;
        right: 34px;

        button {
          font-size: 13px;
          padding: 8px 12px;
        }
      }
    }

    .individual-tree {
      width: 100%;
    }

    .height-tree {
      overflow: auto;
    }

  }



  .custom-tree-node {
    font-size: 14px;

    a {
      margin-left: 10px;

      &:hover i {
        font-weight: 700;

      }
    }

    .el-link.is-underline:hover:after {
      border: none !important;

    }
  }

  .chang-mourse {
    display: flex;
    justify-content: space-between;

    .mou-r {
      margin-right: 10px;
    }
  }
</style>
